<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 40px;height: 40px;background: red;position: absolute;left:0;top:0;display: none;}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  var box = document.querySelector(".box");

  document.onmouseover = function(){
    box.style.display = "block";
  }
  document.onmouseout = function(){
    box.style.display = "none";
  }

  // 鼠标在页面上移动
  document.onmousemove = function(eve){
    var e = eve || window.event;
    // 将元素的位置设置成鼠标相对于页面的坐标
    box.style.left = e.pageX + "px";
    box.style.top = e.pageY + "px";
  }
  
</script>
</html>